<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物车</title>
	<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
	<script src="/layer.js"></script>
</head>
<body>
<form action="/order/checkout" method="post" >
	<div>用户名<input type="text" name="user" id="user" required></div>
	<#if cart??>
		<#list cart?values as drinkGoods>
			<label style="display: block">
				<input type="checkbox" name="drinks" value="${drinkGoods.goods.id}">
				${drinkGoods.goods.id}-${drinkGoods.goods.name}-${drinkGoods.goods.price} <button type="button" onclick="reduce(this,${drinkGoods.goods.id})">-</button> <span>${drinkGoods.count}</span> <button type="button" onclick="increase(this,${drinkGoods.goods.id})">+</button>
				<a href="javascript:void(0)" onclick="cancle(this,${drinkGoods.goods.id})">取消</a>
			</label>
	
		</#list>
	<#else>
		购物车空空如也
	</#if>
</form>
<a href="/category/">继续购物</a>
<a href="javascript:void(0)" onclick="checkout()">结账</a>

<script>
	function reduce(obj,id) {
		$.post("/cart/reduce", {id},
		    function (data, textStatus, jqXHR) {
			    if (data.success) {
				    $(obj).next().text(Number($(obj).next().text()) - 1);
				    layer.msg("减少" + data.drink.name + "成功");
			    } else {
				    layer.msg("已经很少了");
			    }
		    },
		    "json"
		);
	}
	
	function increase(obj,id) {
		$.post("/cart/increase", {id},
			function (data, textStatus, jqXHR) {
				if (data.success) {
					$(obj).prev().text(Number($(obj).prev().text()) + 1);
					layer.msg("增加" + data.drink.name + "成功");
				}
			},
			"json"
		);
	}
	
	
	function cancle(obj,id) {
		$.post("/cart/cancle", {id},
			function (data, textStatus, jqXHR) {
				if (data.success) {
					$(obj).parent().remove();
					layer.msg("取消" + data.drink.name + "成功");
				}
			},
			"json"
		);
	}
	
	function checkout() {
		$("form").submit();
	}
	
</script>
</body>
</html>